<template>
    <div class="app-container">
        <!--患者数据-->
        <div class="title">
        {{appointItem.appointmentDate}} {{appointItem.timeSlot==0?'上午':'下午'}}，{{appointItem.medicalEquipment}}，开放预约数<span style="font-size:24px;margin:0 4px;">{{appointItem.appointmentsNumber}}</span>人次，已预约数<span style="font-size:24px;margin:0 4px;color:blue">{{appointItem.appointmentsMadeNum}}</span>人次，剩余预约名额<span style="font-size:24px;margin:0 4px;color:red">{{appointItem.balance}}</span>人次
        </div>

        <div class="formBox">

            <el-table border v-loading="loading" style="width: 100%" :data="appointPatientList">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="序号" align="center" type="index" width="50">
                    <template slot-scope="scope">
                        <span>{{ getIndex(scope.$index) }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable label="预约时间段" align="center" prop="appointmentDate" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeSlot==1?'下午':'上午' }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable label="顾客姓名" align="center" prop="patientName" width="100" />
                <el-table-column sortable label="电话" align="center" prop="patientPhone" width="120" />
                <el-table-column sortable label="地址" align="center" prop="address" />
                <el-table-column sortable label="预约途径" align="center" prop="way" width="130">
                    <template slot-scope="scope">
                        <span>{{ scope.row.way==1?'小程序预约':'诊间预约' }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable label="预约时间" align="center" prop="appointmentDate" width="100" />
                <el-table-column sortable label="预约医生" align="center" prop="doctorNickname" width="100" />
                <el-table-column sortable label="该顾客预约总数" align="center" prop="totalAppointmentNum" width="190">

                </el-table-column>
                <el-table-column sortable label="该顾客爽约率" align="center" prop="breachRate" width="190">
                    <template slot-scope="scope">
                        <span>{{ scope.row.breachRate=='0.00'?'-':scope.row.breachRate +'%' }}</span>
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getlistDetail" />


        </div>

    </div>
</template>
  
<script>
import { listAllappointmentDetail } from "@/api/appointManage/appointManage";
export default {
    
    name: "appointPatient",
    props: ["appointItem"],
    dicts: [

    ],
    data() {
        return {
            loading:false,
            appointPatientList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
        }
    },
    created() {

    },
    mounted(){
       this.getlistDetail()
    },
    methods: {
        getlistDetail() {
            let that = this
            that.loading=true
            let params = {
                deptId:that.appointItem.deptId,
                planId:that.appointItem.planId,
                timeSlot:that.appointItem.timeSlot,
                appointmentDate:that.appointItem.appointmentDate
            }
            listAllappointmentDetail(params).then(
                (response) => {
                    if(response.code==200){
                        let data = response.data;
                        this.appointPatientList=data
                    }else{
                        this.appointPatientList=[]
                    }
                  
                    that.loading=false
                });
        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
            );
        },
    },

}
</script>
  
<style scoped rel="stylesheet/scss"  lang="scss">
.app-container{
    padding:0px;
}
.title{
    font-size:16px;
    line-height: 40px;
    margin-bottom:20px;
}
</style>
  